<template>
    <div style="margin-top: 30px;">
        <h1>
            {{ dateTitle }}
        </h1>
        <div>
            <el-table :data="dotbData" style="width: 50%; margin: 0 auto;">
                <el-table-column label="日期" prop="dotbDate"></el-table-column>
                <el-table-column label="姓名" prop="dotbName"></el-table-column>
                <el-table-column label="操作">
                    <template>
                        <el-button type="primary" @click="editPopUpMsg">
                            编辑
                        </el-button>
                        <el-button type="danger" @click="delPopUpMsg">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import { Message } from 'element-ui'
Vue.prototype.$message = Message
export default {
    data() {
        return {
            dateTitle: '2020-11-03',
            dotbData: [
                {
                    dotbDate: '2016-05-02',
                    dotbName: '王小虎1'
                },
                {
                    dotbDate: '2016-05-04',
                    dotbName: '王小虎2'
                },
                {
                    dotbDate: '2016-05-01',
                    dotbName: '王小虎3'
                },
                {
                    dotbDate: '2016-05-03',
                    dotbName: '王小虎4'
                }
            ]
        }
    },
    methods: {
        editPopUpMsg() {
            this.$message('编辑');
        },
        delPopUpMsg() {
            this.$message({
                message: '删除',
                type: 'warning'
            });
        }
    }
}
</script>
<style>
</style>